<template>
    <div class="user-index">
        <Header></Header>
        <div class="body">
            <div class="main">
                <div>
                    <registerAgreement v-show="currentType === 'isRegister'" @changeState="changeState"></registerAgreement>
                    <toRegister @toPersonCenter="toPersonCenter" v-show="currentType === 'toRegister'"></toRegister>
                    <personCenter v-if="currentType === 'personCenter'"></personCenter>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {reactive,toRefs,toRaw} from 'vue'
    import Header from "../../components/header/Header";
    import registerAgreement from '../../components/registerAgreement/index'
    import personCenter from '../../components/personCenter/index'
    import toRegister from '../../components/toRegister/index'
    import {getprofileList} from "../../request/api";
    export default {
        name: "index",
        setup(){
            let data = reactive({
                currentType:'isRegister',
                profileList:[]
            })

            let getProfile = () =>{
                getprofileList().then(res =>{
                    console.log(res);
                    if(res.length){
                        data.currentType = 'personCenter'
                    }
                })
            }
            getProfile();
            let changeState = (type) =>{
                data.currentType = type
                console.log(data.currentType)
            }
            let toPersonCenter = (type) =>{
                data.currentType = type
            }
            return{
                ...toRefs(data),
                changeState,
                toPersonCenter
            }
        },
        components:{
            Header,
            registerAgreement,
            toRegister,
            personCenter
        }
    }
</script>

<style scoped>
    .body{
        width: 100%;
        background-color: rgba(245, 246, 250, 1);
        padding-top: 70px;
        min-height: calc(100vh - 87px);
    }
.main{
    width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
</style>
